<script setup lang="ts">
import {list} from '@/api/activity'
import {formatTimestamp} from '@/utils/date'
import {onMounted, ref} from "vue";
const borderStyle=ref("1px solid #D1BF70;")
const opacityStyle=ref(0.5);
const selectIndex=ref()
const chooseBtn=(index,item)=>{
  selectIndex.value = index
  uni.setStorage({
    key:'choosecoupon',
    data:item
  })
  uni.switchTab({
    url:"/pages/order/index",
  })
}
onMounted(()=>{
  getList()
})
const couponList=ref([])
const getList=()=>{
  list({"type":"2"}).then(res=>{
    couponList.value=res.data.filter(item=>item.userActivityId == null);
  })
}
</script>

<template>
  <view class="uni-container-order-choose-coupon">
    <scroll-view scroll-y="true" style="height: 99%;
padding-left: 14%" v-if="couponList.length > 0">
      <view  v-for="(item,index) in couponList"  :key="index" :index="index"
            :style="selectIndex == index?{border:borderStyle,opacity:opacityStyle}:''"
            class="uni-container-order-choose-coupon-item"
            @click="chooseBtn(index,item)">
        <view class="menu-title">
          <text>{{item.name}}</text>
          <text v-if="item.couponUsageScope=='0'">通用</text>
          <text v-if="item.couponUsageScope=='1'">指定菜单</text>
        </view>
        <view class="choose-menu-item" v-if="item.couponUsageScope=='1'">
          <text v-for="menuname in item.menuNames">{{menuname}}</text>
        </view>
        <view class="choose-menu-item-date">
          <text>过期时间：{{formatTimestamp(item.couponEndTime)}}</text>
        </view>
      </view>
    </scroll-view>
	<uv-empty></uv-empty>
  </view>
</template>

<style scoped lang="scss">
.menu-title{
  color: #566B4C;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  font-weight: bolder;
}
.choose-menu-item{
  color: #FFFFFF;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  font-size: 13px;
}
.choose-menu-item text{
  margin-right: 10px;
}
.choose-menu-item-date{
  color:#5A5127;
  font-size: 12px;
  text-align: right;
}
.uni-container-order-choose-coupon-item{
  margin-top: 10px;
  width: 80%;
  height: auto;
  background-color: #967A54;
  padding: 10px;
  border-radius: 5px;
}
.uni-container-order-choose-coupon{
  font-size: 14px;
  background-color: #C9B9AA;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>